<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col section_1">
				<view class="flex-col section_2">
					<view class="flex-col">
						<text class="text_1">账户余额(元)</text>
						<text class="text_2">{{ balance.toFixed(2) }}</text>
					</view>
					<view class="justify-between group_2">
						<view class="flex-col" @click="toPath('/bundle/pages/recharge_record/recharge_record')">
							<text>充值记录</text>
						</view>
						<view class="section_3"> </view>
						<view class="flex-col" @click="toPath('/bundle/pages/consume_record/consume_record')">
							<text>消费明细</text>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-col section_4">
				<view class="flex-col">
					<view class="flex-row group_4">
						<view class="section_5"> </view>
						<text class="text_6">余额充值</text>
					</view>
					<view class="grid">
						<view v-for="(item, index) in moneyList" :key="index" :class="
                moneySelect == index
                  ? 'flex-col items-center grid-item active'
                  : 'flex-col items-center grid-item'
              " @tap.stop="choice(index)">
							<view class="group_5">
								<text class="text_7">￥</text>
								<text class="text_8">{{ item.price }}</text>
							</view>
							<view class="group_6">
								<text class="text_7">赠 </text>
								<text class="text_8">{{ item.give }}</text>
							</view>
						</view>
					</view>
					<view class="flex-col group_7">
						<view class="flex-row section_11">
							<text class="text_21">￥</text>

							<text class="text_22">
								<input type="digit" placeholder="输入自定义金额" v-model="money" /></text>
						</view>
						<view class="flex-col items-center button" @click="comfirm">
							<text>充值</text>
						</view>
						<text class="text_23">充值说明 <br />1：本次充值<span
								style="text-decoration: underline">仅限于在本平台消费</span>。 <br />2：充值和赠送的金额均<span
								style="text-decoration: underline">不可以提现，转移，转赠，退款</span>。
							<br />3：使用范围：本平台所有项目购买，以及交通费用支付。
							<br />4：若遇到充值未到账，请联系平台客服处理。
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		pay
	} from "@/config/utils";
	import {
		blanceRecharge
	} from "@/utils/index";
	import ali from "../../../static/icon/ali.png"
	export default {
		data() {
			return {
				balance: 0,
				moneySelect: 1,
				payShow: false,
				moneyList: [],
				payList: [{
						name: "微信",
						value: 2,
						icon: "https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844672536278668.png",
						disabled: false,
					},
					{
						name: "支付宝",
						icon: ali,
						value: 3,
						disabled: false,
					},
				],
				pay_way: 2,
				price: "",
				money: "",
				id: null,
				time: null,
				count: 0,
			};
		},
		onLoad() {
			this.init();
		},
		onShow() {
			// 当前是否是有支付订单存在
			// uni.removeStorageSync("recharge_sn");
			// const sn = uni.getStorageSync("recharge_sn");
			// console.log("sn", sn);
			// if (sn) {
			// 	this.checkOrderStatus(sn, "recharge");
			// }
			
			// 获取账户余额
			this.$http.post("api/recharge/index").then((res) => {
				this.balance = Number(res.balance);
			});
		},
		watch: {
			money(val) {
				var isSitem = false;
				if (val) {
					for (let item of this.moneyList) {
						if (Number(val) == Number(item.price)) {
							isSitem = true;
							break;
						}
					}
					if (!isSitem) {
						this.moneySelect = null;
					}
					this.price = val;
				}
			},
		},
		methods: {
			init() {
				// 充值列表
				this.$http.post("api/recharge/rechargeList").then((res) => {
					let {
						list
					} = res;
					this.moneyList = list;
					this.moneySelect = 1;
					this.money = this.moneyList[1].price;
				});
			},
			choice(e) {
				this.moneySelect = e;
				this.money = this.moneyList[e].price;
				this.price = this.moneyList[e].price;
				// let index = e + 1;
				// let price = '';
				// price = index === 4 ? 600 : index === 5 ? 800 : index === 6 ? 1000 : index * 100;
			},
			close() {
				this.payShow = false;
			},
			comfirm() {
				if (this.moneySelect === null) {
					this.price = this.money;
					this.id === null;
				} else {
					this.price = this.moneyList[this.moneySelect].price;
				}
				this.topay();
			},
			toPath(url) {
				uni.navigateTo({
					url,
				});
			},
			topay() {
				let obj = {};
				if (this.moneySelect == null) {
					obj.price = this.money;
				} else {
					obj.id = this.moneyList[this.moneySelect].id;
				}
				this.$http.post("api/recharge/createOrder", obj).then((sn) => {
					uni.setStorageSync("recharge_sn", sn);
					this.$http
						.post("api/pay/pay", {
							order_sn: sn,
							pay_way: 4,
							form: "recharge"
						})
						.then((res) => {
							// plus.runtime.openURL(res.url_link);
							uni.navigateTo({
								url: `/pages/confirm_order/url_link?url=${res.url_link}&navi=${1}&form=recharge`,
							})
						});
				});
			},
			async checkOrderStatus(order_sn, form) {
				const res = await this.$http.post("api/wxapp/check_order_status", {
					order_sn,
					form,
				});
				uni.removeStorageSync("recharge_sn");
				if (res.code === 1) {
					// 支付成功了
					// 跳转到 成功页面
					uni.redirectTo({
						url: "/bundle/pages/pay_success/pay_success",
					});
					return;
				}
				// 未支付 - - 跳转订单列表
				uni.switchTab({
					url: "/pages/order/order",
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	@import "wallet.scss";
</style>